<template>
	<view class="content">
		<TopLogo></TopLogo>
		<view class="form-content-wrap">
			<view class="content-box">
				<view class="form-content">
					<block>
						<view class="form-title">手机号</view>
						<view class="pr">
							<input type="number" maxlength="11" name="accounts" class="form-item"
								@input="form_input_mobile_event" />
						</view>
						<view class="form-title">密码</view>
						<input type="password" name="verify" class="form-item"
							@input="form_input_mobile_password_event" />
						<view class="submit-box">
							<img src="../../static/login-btn.png" class="submit-login" @tap="handleLogin"></img>
						</view>
					</block>
					<!-- <img src="../../static/tv.png" class="tv-icon"></img>
					<img src="../../static/good-house.png" class="good-house-icon"></img> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopLogo from '@/components/topLogo/index.vue';
	export default {
		components: {
			TopLogo
		},
		data() {
			return {
				verify_submit_text: '获取验证码',
				verify_disabled: false,
				form_input_mobile_value: '',
				form_input_mobile_password: '',
				verify_time_total: 60,
			}
		},
		onLoad() {

		},
		methods: {
			// 输入手机号码事件
			form_input_mobile_event(e) {
				this.form_input_mobile_value = e.detail.value
			},
			// 输入密码
			form_input_mobile_password_event(e) {
				this.form_input_mobile_password = e.detail.value
			},
			handleLogin() {
				// 网络请求
				uni.showLoading({
					title: '请求中',
				});
				if (this.form_input_mobile_value == '') {
					uni.showToast({
						title: '请输入账号',
						icon: 'error'
					})
					return false;
				}
				if (this.form_input_mobile_password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'error'
					})
					return false;
				}
				uni.request({
					url: 'https://dy.btvs.cn/api/auth/login',
					method: 'POST',
					data: {
						username: this.form_input_mobile_value,
						password: this.form_input_mobile_password
					},
					dataType: 'json',
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 200) {
							uni.setStorageSync('guestType', 999); // 登录身份 - 工作人员
							uni.setStorageSync('token', res.data.data.access_token);
							uni.navigateTo({
								url: `/pages/qdsm/qdsm`
							})

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "error"
							})
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络开小差了哦',
							icon: "error"
						})
					},
				});
			}
		}
	}
</script>

<style lang="less">
	.content {
		height: 100vh;
		background: url('../../static/form_bg3.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;

		.form-content-wrap {
			width: 100%;
			height: 100%;
			// background: url('../../static/form_bg.png');
			// background-size: 85% auto;
			// background-repeat: no-repeat;
			// background-position: center;



			.content-box {
				width: 100%;
				height: 100%;
				// background: url('../../static/wl_bg.png');
				// background-size: 100% 100%;
				// background-repeat: no-repeat;
				// background-position: center;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: row;
			}

			.form-title {
				margin-top: 16px;
				margin-bottom: 8px;
				padding-left: 34rpx;
				font-size: 14px;
				font-weight: 600;
				text-align: left;
				color: #e4aa84;
			}

			.form-content {
				width: 80%;
				padding: 160rpx 80rpx 80rpx 80rpx;
				margin: 0 auto;
				position: relative;

				.good-house-icon {
					position: absolute;
					width: 260rpx;
					right: -80rpx;
					bottom: -100rpx;
				}

				.tv-icon {
					position: absolute;
					width: 200rpx;
					left: -70rpx;
					bottom: -80rpx;
				}
			}

			.form-content .form-item,
			.form-content .code,
			.form-content .verify {
				height: 50px;
				line-height: 50px;
				border: 0;
				background-image: url('/static/input_bg.png');
				background-size: 100% 100%;
			}



			.form-content .code input,
			.form-content .verify input {
				height: 50px;
				line-height: 50px;
				padding: 0 36rpx;

			}



			.form-content .form-item ::v-deep .input-placeholder,
			.form-content .form-item ::v-deep .uni-input-input {
				padding: 0 36rpx;
				font-size: 30rpx;
				text-align: left;
			}

			.form-content .form-item ::v-deep .input-placeholder,
			.form-content .code input ::v-deep .input-placeholder,
			.form-content .verify input ::v-deep .input-placeholder {
				font-size: 30rpx;
			}

			.form-content .code input,
			.form-content .verify input {
				width: 63%;
				text-align: left;
			}



			.form-content .code .verify-submit {
				padding: 0;
				height: 28px;
				line-height: 28px;
				top: 11px;
				right: 36rpx;
				background-color: transparent;
				color: #e4aa84;
			}

			.form-content .verify-submit:after {
				border: none;
				background-color: transparent;
			}

			.submit-box {
				margin-top: 160rpx;
				text-align: center;

				.submit-login {
					width: 240rpx;
					margin: 0 auto;
				}
			}

		}

		.m-b-xl {
			margin-bottom: 18px;
		}

		.pa {
			position: absolute;
		}

		.pr {
			position: relative;
		}

		.br {
			border: none !important;
		}

		.cr-grey,
		.cr-grey-9 {
			color: #999 !important;
		}

		.text-size-sm {
			font-size: 13px !important;
		}

		.form-content .diy ::v-deep .uni-input-input {
			padding-left: 0 !important;
		}
	}
</style>